<template>
  <el-drawer
    title="系统设置"
    size="180px"
    custom-class="settingDrawer"
    :withHeader="false"
    :visible.sync="drawer"
    :direction="direction"
  >
    <div class="themeUl">
      <ul>
        <li>
          <span style="display:block">主题：</span>
          <el-radio v-model="theme" label="black" @change="changeTheme">black</el-radio>
          <el-radio v-model="theme" :label="label2" @change="changeTheme">light</el-radio>
        </li>
        <li style="text-align:right;">
          <el-button type="primary" size="small" style="width:100%;margin: 10px 0;" @click="loginout">退出登陆</el-button>
        </li>
      </ul>
    </div>
  </el-drawer>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  props: {
  },
  data () {
    return {
      theme: 'light',
      drawer: false,
      direction: 'rtl',
      label2: 'light'
    }
  },
  created () {
    let themeName = localStorage.getItem('themeName')
    if (themeName === 'theme-light') {
      this.theme = 'light'
    } else {
      this.theme = 'black'
    }
  },
  computed: {
    ...mapState('theme', [
      'themeName'
    ])
  },
  methods: {
    ...mapActions('theme', [
      'set'
    ]),
    init (flag) {
      this.drawer = flag
    },
    changeTheme (val) {
      console.log(val)
      this.set(val)
      // document.body.className = `theme-${val}`
      localStorage.setItem('themeName', `theme-${val}`)
    },
    loginout () {
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" scoped>
.themeUl{
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  li {
    span{
      display: block;
      line-height: 35px;
    }
  }
}
</style>
